<template>
  <!-- 商品项视图，点击可跳转到商品详情页 -->
  <view class="my-goods-item" @click="handleToGoodsDetail(item)">
    <!-- 商品信息区域 -->
    <view class="info">
      <!-- 商品封面图片 -->
      <view class="cover">
        <!-- u-image 组件显示商品图片，设置了图片地址、淡入效果、圆角、懒加载和尺寸 -->
        <u-image
          :src="data.image_url"
          fade
          radius="10rpx"
          lazy-load
          width="160rpx"
          height="160rpx"
        ></u-image>
      </view>
      <!-- 商品内容信息 -->
      <view class="content flex-1">
        <!-- u-text 组件显示商品名称，最多显示两行 -->
        <u-text
          :lines="2"
          size="15"
          :text="data.name"
          style="margin-bottom: 6rpx"
        ></u-text>

        <!-- u-text 组件显示发货仓库信息 -->
        <u-text
          style="margin-bottom: 10rpx"
          size="12"
          :text="`发货仓库：${data.supplier.name}`"
          type="info"
        ></u-text>

        <!-- u-text 组件显示起订数量和库存信息 -->
        <u-text
          style="margin-bottom: 10rpx"
          size="12"
          :text="`${data.min_sale_quantity}${data.uom.name}起订 | 库存${data.stock}${data.uom.name}`"
          type="info"
        ></u-text>
        <view class="attrs" v-if="data.extra_attributes2">
          <u-text
            v-if="formatLabel"
            :text="formatLabel"
            size="12"
            type="info"
            :lines="1"
          ></u-text>
          <u-gap height="5"></u-gap>
          <view class="service-wrapper">
            <view class="service-label-list" v-if="formatServiceList.length">
              <text
                v-for="(service, index) in formatServiceList"
                :key="index"
                class="service-label"
                >{{ service }}</text
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 商品价格和操作区域 -->
    <view class="price flex justify-between flex-wrap">
      <!-- 价格显示区域 -->
      <view
        class="flex gap-20"
        v-if="data.default_variant && data.default_variant.sale_price"
      >
        <!-- 显示商品销售价格 -->
        <view class="price">
          <text style="color: #ff2122">
            ￥{{ data.default_variant.sale_price }}/{{ data.uom.name }}
          </text>
        </view>
        <!-- 显示商品指导价，有销售价格时显示，否则显示 *** -->
        <view style="text-decoration: line-through">
          <text style="color: #ccc; font-size: 12px">
            ￥{{
              data.sale_price ? data.default_variant.guiding_price : "***"
            }}/{{ data.uom.name }}
          </text>
        </view>
      </view>
      <view class="flex gap-20" v-else>
        <!-- 显示商品销售价格 -->
        <view class="price">
          <text style="color: #ff2122"> ￥*** </text>
        </view>
      </view>

      <!-- 选规格/收起按钮，点击可展开或收起规格列表 -->
      <view
        v-if="data.sale_price"
        :class="{ 'expand-btn': true, active: isExpand }"
        @click.stop="handleSwitchExpand"
      >
        {{ isExpand ? "收起" : "选规格" }}
      </view>
      <!-- 根据用户登录和商户状态显示提示信息 -->
      <view v-else style="font-size: 24rpx; display: flex; align-items: center">
        {{
          !store.state.user.isLogin
            ? "入驻查看价格"
            : !store.state.user.isStore
            ? "入驻查看价格"
            : ""
        }}
        <u-icon name="arrow-right" size="15" color="#999999"></u-icon>
      </view>
    </view>
    <!-- 规格列表，展开时显示 -->
    <view v-if="isExpand" class="skus">
      <!-- 循环显示每个规格项 -->
      <view
        class="sku flex justify-between items-center mt-20 gap-20"
        v-for="(sku, index) in skus"
        :key="index"
      >
        <!-- 规格属性和价格信息 -->
        <view class="attr flex-1">
          <!-- u-text 组件显示规格属性 -->
          <u-text
            :text="formatAttributes(sku.attributes)"
            size="14"
            :lines="1"
          ></u-text>
          <!-- 显示规格的销售价格和指导价 -->
          <view class="price">
            <text class="sale">
              ￥{{ sku.sale_price }}/{{ sku.product.uom.name }}
            </text>

            <text class="guiding">
              ￥{{ sku.guiding_price }}/{{ sku.product.uom.name }}
            </text>
          </view>
        </view>
        <!-- 添加到购物车或数量选择器 -->
        <view>
          <!-- 未添加到购物车时显示添加按钮 -->
          <view
            class="add-cart"
            v-if="!isCart(sku.id)"
            @click.stop="addCart(sku)"
          >
            <up-icon
              name="plus-circle-fill"
              size="25"
              color="#ff0000"
            ></up-icon>
          </view>
          <!-- 已添加到购物车时显示数量选择器 -->
          <my-numberbox
            v-else
            v-model="checkCart[sku.id].num"
            :max="sku.stock"
            @plus="addCartForOne(sku)"
            @minus="delCartForOne(sku)"
          ></my-numberbox>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 导入 Vue 响应式和计算属性相关函数
import { computed, ref, watch } from "vue";
// 导入 Vuex 的 useStore 函数
import { useStore } from "vuex";
// 导入商品详情接口
import { goodsDetail } from "@/common/apis/goods.js";
// 导入检查是否可以继续操作的工具函数
import { canNextForStore } from "@/util";

// 获取 Vuex 存储实例
const store = useStore();

// 定义组件的自定义事件
const emits = defineEmits(["addCart"]);

// 定义组件的 props，接收商品数据
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

// 定义是否展开规格列表的响应式变量
const isExpand = ref(false);

// 定义商品规格列表的响应式变量
const skus = ref([]);

const formatLabel = computed(() => {
  let label = "";
  const data = props.data;
  if (data.extra_attributes2 && data.extra_attributes2.label instanceof Array) {
    data.extra_attributes2.label.forEach((item) => {
      label += ` ${item} |`;
    });
  }
  return label.slice(0, -1);
});

const formatServiceList = computed(() => {
  const data = props.data;
  if (
    data.extra_attributes2 &&
    data.extra_attributes2.service instanceof Array
  ) {
    return data.extra_attributes2.service;
  }
  return [];
});

/**
 * 跳转商品详情页
 * @returns {Promise<void>}
 */
async function handleToGoodsDetail() {
  // 检查是否可以继续操作
  const canNext = await canNextForStore();
  if (canNext) {
    // 跳转到商品详情页
    uni.navigateTo({
      url: `/pages/goods/detail?id=${props.data.id}`,
    });
  }
}

// 计算购物车中选中的商品
const checkCart = computed(() => {
  return store.state.cart.checkCart;
});

/**
 * 检测是否为购物车商品
 * @param {number} id - 商品 ID
 * @returns {boolean} - 是否在购物车中
 */
function isCart(id) {
  return Object.keys(checkCart.value).includes(id + "");
}

/**
 * 加入购物车，需判断最低起购数量
 * @param {Object} sku - 商品规格对象
 * @returns {Promise<void>}
 */
async function addCart(sku) {
  // 检查库存是否大于最低起购数量
  if (sku.stock >= props.data.min_sale_quantity) {
    // 调用 Vuex 中的 action 添加商品到购物车
    await store.dispatch("fetchAddCart", {
      product_id: props.data.id,
      quantity: props.data.min_sale_quantity ? props.data.min_sale_quantity : 1,
      variant_id: sku.id,
    });
    // 刷新购物车列表
    await store.dispatch("fetchCartList");
  } else {
    // 提示库存不足
    uni.$u.toast("库存不足");
  }
}

/**
 * 加入购物车，数量加 1
 * @param {Object} sku - 商品规格对象
 * @returns {Promise<void>}
 */
async function addCartForOne(sku) {
  // 检查购物车中的数量是否达到库存上限
  if (checkCart.value[sku.id].num >= sku.stock) {
    // 提示库存不足
    uni.$u.toast("库存不足");
    return;
  }
  // 调用 Vuex 中的 action 添加商品到购物车，数量加 1
  await store.dispatch("fetchAddCart", {
    product_id: props.data.id,
    quantity: "+1",
    variant_id: sku.id,
  });
  // 刷新购物车列表
  await store.dispatch("fetchCartList");
}

/**
 * 减少商品在购物车中的数量
 * @param {Object} sku - 商品规格对象
 * @returns {Promise<void>}
 */
async function delCartForOne(sku) {
  // 检查减少后的数量是否低于最低起购数量
  if (checkCart.value[sku.id].num - 1 < props.data.min_sale_quantity) {
    if (props.data.min_sale_quantity <= 1) {
      // 最低起购数量小于等于 1 时，直接删除商品
      await store.dispatch("fetchDelCart", checkCart.value[sku.id].cartOrderId);
      // 刷新购物车列表
      await store.dispatch("fetchCartList");
      return;
    }
    // 显示确认删除的模态框
    uni.showModal({
      title: "提示",
      content: `继续减少将会低于起订数量，是否删除?`,
      confirmColor: "#5ae372",
      success: async (res) => {
        if (res.confirm) {
          // 用户确认删除，调用 Vuex 中的 action 删除商品
          await store.dispatch(
            "fetchDelCart",
            checkCart.value[sku.id].cartOrderId
          );
          // 刷新购物车列表
          await store.dispatch("fetchCartList");
        }
      },
    });
  } else {
    // 减少商品数量
    await store.dispatch("fetchAddCart", {
      product_id: props.data.id,
      quantity: "-1",
      variant_id: sku.id,
    });
    // 刷新购物车列表
    await store.dispatch("fetchCartList");
  }
}

/**
 * 获取商品规格信息
 * @returns {Promise<void>}
 */
async function fetchGoodsSkus() {
  // 显示加载提示
  uni.showLoading();
  // 调用接口获取商品详情
  const response = await goodsDetail(props.data.id);
  // 隐藏加载提示
  uni.hideLoading();
  if (response) {
    // 更新商品规格列表
    skus.value = response.skus;
  }
}

/**
 * 切换规格列表的展开状态
 * @returns {Promise<void>}
 */
async function handleSwitchExpand() {
  // 展开且规格列表为空时，获取商品规格信息
  if (!isExpand.value && skus.value.length == 0) {
    await fetchGoodsSkus();
  }
  // 切换展开状态
  isExpand.value = !isExpand.value;
}

/**
 * 格式化规格属性
 * @param {Array} attributes - 规格属性数组
 * @returns {string} - 格式化后的属性字符串
 */
function formatAttributes(attributes) {
  let str = "";
  // 遍历属性数组，拼接属性字符串
  attributes.forEach((item, index) => {
    if (attributes.length > index + 1) {
      str += `${item.key}:${item.value}+`;
    } else {
      str += `${item.key}:${item.value + ""}`;
    }
  });

  // 去除最后一个分号
  return str;
}
</script>

<style lang="scss" scoped>
.my-goods-item {
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 0 10rpx 5rpx rgba(0, 0, 0, 0.1);

  .info {
    display: flex;
    gap: 20rpx;

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      &:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 80rpx;
        height: 100%;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 1)
        );
      }
    }
  }

  .actions {
    display: flex;
    justify-content: flex-end;
  }

  .price {
    font-size: 14px;
    color: $u-info;
    align-items: center;

    .expand-btn {
      color: #fff;
      background-color: $u-primary;
      padding: 10rpx 20rpx;
      border-radius: 40rpx;

      &.active {
        background-color: $u-info;
      }
    }
  }

  .skus {
    .sku {
      .attr {
        .price {
          .sale {
            font-size: 14px;
            color: $u-error;
          }
          .guiding {
            font-size: 12px;
            color: $u-info;
            text-decoration: line-through;
            display: inline-block;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}

.attrs {
  .service-wrapper {
    display: flex;

    // 添加溢出显示模糊效果
    .service-label-list {
      white-space: nowrap; // 禁止换行;
      overflow-x: hidden; // 允许水平滚动
      padding-bottom: 20rpx;
      width: 0;
      flex: 1;

      .service-label {
        margin-right: 20rpx;
        color: $u-error;
        box-sizing: border-box;
        border: 1px solid $u-error;
        padding: 5rpx 10rpx;
        border-radius: 20rpx;
        font-size: 12px;
        line-height: 12px;
        white-space: nowrap;
      }
    }
  }
}
</style>
